<template>
  <base-page-view :show-to-top="false" class-name="page-container tax-container">
    <view class="block-item title-block">
      <view class="title-l">发票状态：<text class="red">{{ taxDetail.status && taxStatus[taxDetail.status] }}</text></view>
      <view class="title-r" @click="showNotice">发票须知<image src="/static/images/order/icon_wh_b.png" /></view>
    </view>
    <view class="block-item">
      <view class="item-row">
        <text>发票类型：</text>
        <text>电子普通发票</text>
        <text v-if="taxDetail.status === 'WAIT_MARK' || taxDetail.status === 'SUCCESS'" class="red-btn" @click="lookTaxPdf">查看发票</text>
      </view>
      <view class="item-row">
        <text>发票抬头：</text>
        <text>{{ taxDetail.invoiceTitle }}</text>
      </view>
      <view class="item-row">
        <text>发票内容：</text>
        <text>{{ taxDetail.invoiceContent }}</text>
      </view>
    </view>
    <view v-if="taxDetail.status !== 'CANCEL'" class="block-item">
      <view class="progress-title">开票进度： 发票将在订单完成后72小时内开具</view>
      <view class="progress-list">
        <view class="prog-item">
          <b-image src="/static/images/order/ic_sure.png" width="64" height="65" />
          <text>订单下单</text>
        </view>
        <view class="prog-line one" :class="{'green': orderFinish || openTax }"></view>
        <view class="prog-item">
          <b-image v-if="orderFinish || openTax" src="/static/images/order/order_ic_s.png" width="64" height="65" />
          <b-image v-else src="/static/images/order/order_ic.png" width="64" height="65" />
          <text>订单完成</text>
        </view>
        <view class="prog-line two" :class="{'green': openTax}"></view>
        <view class="prog-item">
          <b-image v-if="openTax" src="/static/images/order/tax_ic_s.png" width="64" height="65" />
          <b-image v-else src="/static/images/order/tax_ic.png" width="64" height="65" />
          <text>发票开具</text>
        </view>
      </view>
    </view>
    <view v-if="taxDetail.status==='SUCCESS'" class="block-item email-item">
      <text class="label-txt">邮件地址：</text>
      <input v-model="email" class="input" type="text" placeholder="请输入收票人电子邮箱">
    </view>
    <view v-if="taxDetail.status==='SUCCESS'" class="block-btn">
      <text class="btn-item black" @click="handleSendEmail">发送邮箱</text>
    </view>
    <tax-notice ref="taxNotice" from="detail" />
  </base-page-view>
</template>
<script>
import './index.scss'
import taxNotice from '../components/taxNotice'
export default {
  components: {
    taxNotice
  },
  data() {
    return {
      taxDetail: {},
      taxStatus: {
        'SUCCESS': '已开票',
        'WAIT_MARK': '待开票',
        'CANCEL': '已取消'
      },
      email: ''
    }
  },
  computed: {
    orderFinish() {
      if (this.orderStatus === 4 || this.taxDetail.status === 'SUCCESS') {
        return true
      }
      return false
    },
    openTax() {
      return this.taxDetail.status === 'SUCCESS'
    }
  },
  onLoad(options) {
    this.orderNo = options.orderNo
    this.orderStatus = options.orderStatus || ''
    this.getInvoiceDetail()
  },
  methods: {
    // 获取发票详情
    async getInvoiceDetail() {
      const res = await this.$api.invoiceApi.getInvoiceDetail({
        orderNo: this.orderNo
      })
      if (res.success && res.data) {
        this.taxDetail = res.data
        this.email = this.taxDetail.email
      }
    },
    // 显示通知
    showNotice() {
      this.$refs.taxNotice.show()
    },
    async handleSendEmail() {
      const email = this.email.trim()
      const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (!email) {
        uni.showToast({
          title: '请填写邮箱地址',
          icon: 'none'
        })
        return
      }
      if (!reg.test(email)) {
        uni.showToast({
          title: '请填写正确的邮箱地址',
          icon: 'none'
        })
        return
      }
      const res = await this.$api.invoiceApi.sendEmail({
        orderNo: this.orderNo,
        email: email
      })
      if (res.success) {
        uni.showToast({
          title: '已发送成功，请注意查收！',
          icon: 'none'
        })
      }
    },
    lookTaxPdf() {
      if (!this.taxDetail.invoicePdfList || this.taxDetail.invoicePdfList.length <= 0) {
        uni.showToast({
          title: '亲，请耐心等待，开票中',
          icon: 'none'
        })
        return
      }
      let data = []
      this.taxDetail.invoicePdfList.forEach(i => {
        if (i.bluePdfPath && i.bluePdfPath.length > 0) {
          data = data.concat(i.bluePdfPath.split(','))
        }
        if (i.redPdfPath && i.redPdfPath.length > 0) {
          data = data.concat(i.redPdfPath.split(','))
        }
      })
      if (data.length <= 0) {
        return
      }
      uni.previewImage({
        urls: data,
        indicator: 'number'
      })
    }
  }
}
</script>
